<template>
	<view class="container">
		<!-- <zhouWei-navBar>Language setting</zhouWei-navBar> -->
		<!-- <z-nav-bar backState="2000">Language setting</z-nav-bar> -->
		<view class="locale-setting">{{$t('index.language-info')}}</view>
		<view class="list-item">
			<text class="k">{{$t('index.system-language')}}:</text>
			<text class="v">{{systemLocale}}</text>
		</view>
		<view class="list-item">
			<text class="k">{{$t('index.application-language')}}:</text>
			<text class="v">{{applicationLocale}}</text>
		</view>
		<view class="locale-setting">{{$t('index.language')}}</view>
		<view class="locale-list">
			<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
				<text class="text">{{item.text}}</text>
				<text class="icon-check" v-if="item.code == applicationLocale"></text>
			</view>
		</view>
		<view class="">
			<button type="default" @click="test">test</button>
		</view>
	</view>
</template>

<script>
	// import pushServer from './dc-push/push.js';
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	/**
	 * 代码需要精简，因为是从两个不同的页面综合而成，有些逻辑是不需要的
	 */
	export default {
		data() {
			return {
				systemLocale: '',
				applicationLocale: '',
				// pushServer: pushServer,
				// supportMode: [],
				// pushIsOn: "wait",
				// currentLanguage: "",
				// userInfo: {}
			}
		},
		computed: {
			// hasLogin() {
			// 	return store.hasLogin
			// },
			// i18nEnable() {
			// 	return getApp().globalData.config.i18n.enable
			// },
			locales() { //多语言需要这样设置初始值
				return [{
						text: this.$t('locale.auto'),
						code: 'auto'
					}, {
						text: this.$t('locale.en'),
						code: 'en'
					}, 
					{
						text: this.$t('locale.ru'),
						code: 'ru'
					},
					{
						text: this.$t('locale.kk'),
						code: 'kk'
					},
					{
						text: this.$t('locale.zh-hans'),
						code: 'zh-Hans'
					}
				]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			// this.currentLanguage = uni.getStorageSync('CURRENT_LANG') ? uni.getStorageSync('CURRENT_LANG') : '简体中文'
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
		},
		methods: {
			test(){
				console.log(this.$i18n);
				// console.log(getApp().globalData);
			},
			onLocaleChange(e) {
				
				let language = uni.getStorageSync('CURRENT_LANG')
				uni.showModal({
					title:'',
					content: this.$t('index.language-change-confirm'),
					success: async (res) => {
						if (res.confirm) {
							language = e.code == 'auto' ? 'en' : e.code //此处需要完善
							const globalData = getApp().globalData
							globalData.locale = language
							uni.setStorageSync('CURRENT_LANG', language)
							uni.setLocale(language)
							// #ifdef H5
							this.$i18n.locale = language;
							console.log('H5重启');
							window.location.replace(window.location.origin + '/#/');
							// window.location.replace('/#/')
							// #endif
							uni.reLaunch({
								url: '/uni_modules/uni-im/pages/index/index',
								complete: () => {
									uni.$emit("changeLanguage", language)
								}
							})
							// this.reStart();
						}
					}
				})
				//未测试苹果系统，以下代码中有类似的处理，可参考
				// if (this.isAndroid) {
				// 	uni.showModal({
				// 		content: this.$t('index.language-change-confirm'),
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				uni.setLocale(e.code);
				// 				// #ifdef H5
				// 				this.$i18n.locale = e.code;
				// 				// #endif
				// 				this.reStart();
				// 			}
				// 		}
				// 	})
				// } else {
				// 	uni.setLocale(e.code);
				// 	this.$i18n.locale = e.code;
				// 	this.reStart()
				// }
			},
			/**
			 * 暂时未使用，如果重启效果不好，则可以测试使用这段代码
			 */
			reStart() {
				// #ifdef H5
				//关闭当前所有页面，重启
				window.location.replace('/#/')
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.restart();
				// #endif
			}
		}

	}
</script>

<style>
	.container {
		width: 90vw;
		margin: 0 auto;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.description {
		font-size: 14px;
		opacity: 0.6;
		margin-bottom: 15px;
	}

	.detail-link {
		font-size: 14px;
		word-break: break-all;
	}

	.link {
		color: #007AFF;
		margin-left: 10px;
	}

	.locale-setting {
		font-size: 16px;
		font-weight: bold;
		margin-top: 25px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-item {
		font-size: 14px;
		padding: 10px 0;
	}

	.list-item .v {
		margin-left: 5px;
	}

	.locale-item {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
	}

	.locale-item .text {
		flex: 1;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
</style>
